import 'package:flutter/material.dart';
import 'package:flutter_shopping/utils/colors.dart';
import 'package:flutter_shopping/utils/utils.dart';

///
/// 加减视图
///
class CalculateCounter extends StatefulWidget {
  const CalculateCounter({
    super.key,
  });

  @override
  State<CalculateCounter> createState() => _CalculateCounterState();
}

class _CalculateCounterState extends State<CalculateCounter> {
  int count = 1;

  @override
  Widget build(BuildContext context) {
    return Row(
      mainAxisAlignment: MainAxisAlignment.spaceBetween,
      children: [
        Row(
          children: [
            CounterSymbolWidget(
              onTap: () {
                if (count > 1) {
                  setState(() {
                    count--;
                  });
                }
              },
              icon: const Icon(
                Icons.remove,
                color: kTextColor,
              ),
            ),
            Container(
              width: 50,
              alignment: Alignment.center,
              child: Text('$count'.padLeft(2, '0')),
            ),
            CounterSymbolWidget(
              onTap: () {
                setState(() {
                  count++;
                });
              },
              icon: const Icon(
                Icons.add,
                color: kTextColor,
              ),
            ),
          ],
        ),

        /// 喜欢
        IconButton(
            onPressed: () => print("喜欢"),
            icon: Container(
              padding: const EdgeInsets.all(8),
              height: 32,
              width: 32,
              decoration: const BoxDecoration(
                color: Color(0xFFFF6464),
                shape: BoxShape.circle,
              ),
              child: Utils.loadSvg('heart'),
            ))
      ],
    );
  }
}

///
/// 计算符号：加、减
///
class CounterSymbolWidget extends StatelessWidget {
  const CounterSymbolWidget({
    super.key,
    required this.onTap,
    required this.icon,
  });

  final VoidCallback? onTap;
  final Icon icon;

  @override
  Widget build(BuildContext context) {
    return Container(
      width: 40,
      height: 32,
      alignment: Alignment.center,
      child: OutlinedButton(
        onPressed: onTap,
        style: OutlinedButton.styleFrom(
          padding: EdgeInsets.zero,
          shape: RoundedRectangleBorder(
            borderRadius: BorderRadius.circular(13),
          ),
        ),
        child: icon,
      ),
    );
  }
}
